<template>
  <view class="home u-flex-col">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="筛选工作面"
      back-icon-color="#fff"
      title-color="#fff"
    ></u-navbar>

    <view class="u-p-l-20 u-p-r-20 form">
      <u-form :model="form" ref="uForm">
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="工作面状态"
          prop="currentStatus"
        >
          <chooseBtn
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="btnList"
            :custom-check-style="customCheckStyle"
            @click="clickBtn($event, 'currentStatus')"
          ></chooseBtn>
        </u-form-item>
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="掘进方法"
          prop="drivingMethod"
          class="m-t-20"
          v-if="form.type === '0'"
        >
          <chooseBtn
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="drivingMethodList"
            :custom-check-style="customCheckStyle"
            @click="clickBtn($event, 'drivingMethod')"
          ></chooseBtn>
        </u-form-item>
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="采煤工业"
          prop="coalTech"
          class="m-t-20"
          v-else
        >
          <chooseBtn
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="coalTechList"
            :custom-check-style="customCheckStyle"
            @click="clickBtn($event, 'coalTech')"
          ></chooseBtn>
        </u-form-item>
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="围岩性质"
          prop="typeDetail"
          class="m-t-20"
          v-if="form.type === '0'"
        >
          <chooseBtn
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="typeDetailList"
            :custom-check-style="customCheckStyle"
            @click="clickBtn($event, 'typeDetail')"
          ></chooseBtn>
        </u-form-item>
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="智能化工作面"
          prop="isIntelligent"
          class="m-t-20"
        >
          <chooseBtn
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="isIntelligentList"
            :custom-check-style="customCheckStyle"
            @click="clickBtn($event, 'isIntelligent')"
          ></chooseBtn>
        </u-form-item>
      </u-form>
    </view>
    <view class="confrim-btn u-flex u-row-between u-p-t-20">
      <u-button
        :hair-line="false"
        shape="circle"
        form-type="reset"
        :custom-style="formCustomStyle"
        throttle-time="500"
        @click="reset"
        >重置</u-button
      >
      <u-button
        :hair-line="false"
        shape="circle"
        :custom-style="formSubmitStyle"
        form-type="submit"
        throttle-time="500"
        @click="submit"
        >确定</u-button
      >
    </view>
  </view>
</template>

<script>
import chooseBtn from "@/pages/components/chooseBtn";

export default {
  name: "screen",
  components: {
    chooseBtn,
  },
  data() {
    return {
      form: {},
      customBoxStyle: {
        justifyContent: "space-start",
      },
      // 按钮组组件样式
      customBtnStyle: {
        background: "#fff",
        border: "1px solid #fff",
        padding: "0rpx 20rpx",
        marginRight: "20rpx",
        borderRadius: "32rpx",
        fontWeight: 400,
        color: "#666666",
      },
      customCheckStyle: {
        background: "#fff",
        padding: "0rpx 20rpx",
        marginRight: "20rpx",
        borderRadius: "32rpx",
        border: "1px solid #288CFE",
        fontWeight: 400,
        color: "#288CFE",
      },
      // 按钮组组件数据，数据checked是是否选中的，默认false布尔值，必填，label也是必填
      btnList: [
        {
          label: "正常",
          id: "0",
          checked: false,
        },
        {
          label: "暂停",
          id: "1",
          checked: false,
        },
        {
          label: "完工",
          id: "2",
          checked: false,
        },
      ],
      drivingMethodList: [
        {
          label: "炮掘",
          id: "001",
          checked: false,
        },
        {
          label: "综掘",
          id: "002",
          checked: false,
        },
        {
          label: "其他",
          id: "099",
          checked: false,
        },
      ],
      typeDetailList: [
        {
          label: "岩巷",
          id: "1",
          checked: false,
        },
        {
          label: "煤巷",
          id: "2",
          checked: false,
        },
        {
          label: "半煤岩巷",
          id: "3",
          checked: false,
        },
      ],
      coalTechList: [
        {
          label: "炮采",
          id: "001",
          checked: false,
        },
        {
          label: "综采",
          id: "005",
          checked: false,
        },
        {
          label: "普采",
          id: "006",
          checked: false,
        },
        {
          label: "其他",
          id: "009",
          checked: false,
        },
      ],
      isIntelligentList: [
        {
          label: "否",
          id: "1",
          checked: false,
        },
        {
          label: "是",
          id: "0",
          checked: false,
        },
      ],
      labelStyle: {
        color: "#333333",
        fontWeight: "600",
      },
      formCustomStyle: {
        color: "#000",
        border: "1rpx solid #ddd",
        background: "#fff",
        width: "40%",
      },
      formSubmitStyle: {
        color: "#ffffff",
        background: "#288CFE",
        width: "40%",
        border: "none",
      },
      currentStatus: "",
    };
  },
  methods: {
    init() {
      this.btnList.forEach((el) => {
        if (this.form.currentStatus.includes(el.id)) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });
      this.drivingMethodList.forEach((el) => {
        if (this.form.drivingMethod.includes(el.id)) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });
      this.typeDetailList.forEach((el) => {
        if (this.form.typeDetail.includes(el.id)) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });
      this.coalTechList.forEach((el) => {
        if (this.form.coalTech.includes(el.id)) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });
      this.isIntelligentList.forEach((el) => {
        if (this.form.isIntelligent.includes(el.id)) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });
    },
    //按钮方法
    clickBtn(res, name) {
      if (res && res.length) {
        this.form[name] = res.map((item) => item.id).join(",");
      } else {
        this.form[name] = "";
      }
    },

    submit() {
      const params = {
        ...this.form,
      };
      uni.$emit(this.emitEvent, params);
      uni.navigateBack({
        delta: 1,
      });
    },
    reset() {
      this.form = {
        ...this.form,
        coalTech: "",
        currentStatus: this.currentStatus,
        isIntelligent: "",
        typeDetail: "",
        drivingMethod: "",
      };
      this.init();
    },
  },

  onLoad(options) {
    const { form, emitEvent } = options;
    const obj = JSON.parse(form);
    this.currentStatus = obj.currentStatusCopye;
    this.form = { ...this.form, ...obj };
    this.emitEvent = emitEvent;
    if (this.form.type === "1") {
      this.btnList.push({
        label: "未采",
        id: "3",
        checked: false,
      });
    } else {
      this.btnList.push({
        label: "未掘",
        id: "3",
        checked: false,
      });
    }
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .form {
    /deep/.u-form-item {
      padding: 0;
    }

    /deep/.u-input {
      .u-input__right-icon--select {
        display: none;
      }
    }
  }

  .confrim-btn {
    position: absolute;
    width: 100%;
    bottom: 20rpx;
    z-index: 1;
  }
}

.time-body {
  position: relative;
  width: 100%;
}
</style>
